import React, { Component } from 'react';
import { Radio } from 'antd';
import styles from './index.less';
import Title from '../../../commonComp/Title';
import ChartTitle from '../../../commonComp/ChartTitle';
import LeftChart from './components/LeftChart';
import RightFirstChart from './components/RightFirstChart';
import RightSecondChart from './components/RightSecondChart';

export default class index extends Component {
  state = { height: 0, key: 'left' };

  componentDidMount() {
    this.setHeight();
    window.addEventListener('resize', this.eventHeight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.eventHeight);
  }

  eventHeight = () => {
    this.setHeight();
  };

  setHeight = () => {
    const tableComp = document.getElementById('tableComp');
    this.setState({ height: tableComp.clientHeight });
  };

  handleModeChange = e => {
    const key = e.target.value;
    this.setState({ key });
  };

  render() {
    const { key } = this.state;

    return (
      <div className={styles.roots}>
        <Title title={'数采自动化情况分析'} />
        <div className={styles.charts}>
          <div className={styles.left}>
            <ChartTitle title={'数据源采集渠道分布'} />
            <div className={styles.ringCharts}>
              <LeftChart />
            </div>
          </div>
          <div className={styles.right}>
            <div className={styles.context} id="tableComp">
              <ChartTitle title={'重点数据源转自动采集完成情况'} />
              <div className={styles.rightCharts}>
                <div className={styles.rightLeft}>
                  <RightFirstChart />
                </div>
                <div className={styles.rightRight}>
                  <RightSecondChart />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
